<template>
	<view class="content">
		<view @click="navigate('/page_other/difficult_job/detail?id='+item.id+'&name='+item.name+'&type='+item.type)"
			v-for="(item,index) in list" :key="item.id" class="block-item">
			<view class="name">{{item.name}}</view>
			<image :src="imageUrl+item.icon" class="icon"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 1,
						name: '“40、50”人员',
						icon: '/difficult_job/1.png',
						type: 9
					},
					{
						id: 2,
						name: '残疾人员',
						icon: '/difficult_job/2.png',
						type: 10
					},
					{
						id: 3,
						name: '享受最低生活保障人员',
						icon: '/difficult_job/3.png',
						type: 11
					},
					{
						id: 4,
						name: '城镇登记失业人员',
						icon: '/difficult_job/4.png',
						type: 12
					},
					{
						id: 5,
						name: '被征地农民',
						icon: '/difficult_job/5.png',
						type: 13
					},
					{
						id: 6,
						name: '特困职工家庭人员',
						icon: '/difficult_job/6.png',
						type: 14
					},
					{
						id: 7,
						name: '零就业家庭人员',
						icon: '/difficult_job/7.png',
						type: 15
					},
					{
						id: 8,
						name: '困难高校毕业生',
						icon: '/difficult_job/8.png',
						type: 16
					},
				],
				imageUrl: ''
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
		},
		onLoad() {
			this.imageUrl = this.globalConfig.imageUrl;
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.content {
		width: 100%;
		padding: 30rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.block-item {
			width: 100%;
			height: 170rpx;
			margin-bottom: 32rpx;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 30rpx;

			.name {
				width: calc(100% - 100rpx);
				font-weight: bold;
				margin-right: 20rpx;
			}

			.icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}

		.block-item:last-child {
			margin-bottom: 0;
		}

		.block-item:nth-child(1n) {
			background: #EAFAED;
		}

		.block-item:nth-child(2n) {
			background: #FFF5F4;
		}

		.block-item:nth-child(3n) {
			background: #FDF7EB;
		}

		.block-item:nth-child(4n) {
			background: #EAF9FE;
		}
	}
</style>
